<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI伪类</title>
    <style>
        /*复选框被选择之后变大*/

        /*
        如果使用input:focus的话,对于复选框来说勾选和取消勾选都是获取焦点,并且所有的input元素在点击的
        时候都会收到影响,因此我们不能用input:focus
        */
        /*input:focus {*/
        /*    width: 80px;*/
        /*    height: 80px;*/
        /*}*/


        /*我们可以使用checked,这个状态是专门给勾选框设置的状态,不会影响到其他元素
          checked:选中勾选的框
        */

        /*
        常用的UI伪类:
        :checked:被选用的勾选框
        :enable:可用的表单元素
        :disabled:不可用的表单元素
        */
        input:checked {
            width: 80px;
            height: 80px;

            /*    勾选框的样式会被限制,无法调节*/
            background-color: green;
            color: #4b6aff;
        }
    </style>
</head>
<body>
<label>
    <input type="checkbox">你好
<!--</label>-->
<!--<br>-->
<!--<label>-->
<!--    <input type="text">文本-->
<!--</label>-->
<!--<br>-->
<!--<label>-->
<!--    <input type="radio" name="hobbit">抽烟-->
<!--</label>-->
<!--<label>-->
<!--    <input type="radio" name="hobbit">喝酒-->
<!--</label>-->
<!--<label>-->
<!--    <input type="radio" name="hobbit">烫头-->
<!--</label>-->
</body>
</html>